@extends('layouts.app', ['activePage' => 'video', 'titlePage' => '视频课程管理'])

@section('content')
  <div class="content">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-12">
          <div class="card">
            <div class="card-header card-header-primary">
              <h4 class="card-title ">视频课程管理</h4>
              <p class="card-category"> {{ __('Here you can manage videos') }}</p>
            </div>
            <div class="card-body">
              @if (session('status'))
                <div class="row">
                  <div class="col-sm-12">
                    <div class="alert alert-success">
                      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <i class="material-icons">close</i>
                      </button>
                      <span>{{ session('status') }}</span>
                    </div>
                  </div>
                </div>
              @endif
              <div class="row justify-content-between">
                <div class="col-md-auto mr-auto">
                  <ul class="nav">
                    <li class="nav-item">
                      <a class="nav-link active" href="?type">全部({{ $countAll }})</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="?type=0">未发布({{ $countStatus0 }})</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="?type=1">已发布({{ $countStatus1 }})</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="?type=2">已下架({{ $countStatus2 }})</a>
                    </li>
                  </ul>
                </div>
                <div class="col-auto">
                  <form class="navbar-form navbar-search" method="get">
                    <div class="input-group no-border">
                      <input type="text" name="search" class="form-control" placeholder="查找...">
                      <button type="submit" class="btn btn-white btn-round btn-just-icon">
                        <i class="material-icons">search</i>
                        <div class="ripple-container"></div>
                      </button>
                    </div>
                  </form>
                </div>
                <div class="col-auto">
                  <a href="{{ route('video.create') }}" class="btn btn-sm btn-primary">创建</a>
                </div>
              </div>
              <div class="table-responsive">
                <table class="table">
                  <thead class="text-primary">
                  <th class="text-center">编号</th>
                  <th>课程标题</th>
                  <th class="text-center">视频</th>
                  <th>课程介绍</th>
                  <th>价格</th>
                  <th>上传时间</th>
                  <th>发布时间</th>
                  <th class="text-center">状态</th>
                  <th class="text-right">操作</th>
                  </thead>
                  <tbody>
                  @if(is_null($videos))
                    {{-- 演示数据 --}}
                    <tr>
                      <td class="text-center">1</td>
                      <td>shipin</td>
                      <td>
                        <a href="#">点击查看</a>
                      </td>
                      <td>视频简介balabala...</td>
                      <td>Free</td>
                      {{--                    <td>AA Club</td>--}}
                      <td>2000/1/1 12:00:00</td>
                      <td><span class="badge badge-success">{{ __('Normal') }}</span></td>
                      <td class="td-actions text-right">
                        <a rel="tooltip" class="btn btn-success btn-link" href="{{ route('video.edit') }}"
                           data-original-title="" title="">
                          <i class="material-icons">delete</i>
                          <div class="ripple-container"></div>
                        </a>
                        <a rel="tooltip" class="btn btn-success btn-link" href="{{ route('video.edit') }}"
                           data-original-title="" title="">
                          <i class="material-icons">edit</i>
                          <div class="ripple-container"></div>
                        </a>
                      </td>
                    </tr>
                    <tr>
                      <td class="text-center"><input type="checkbox" value="2"></td>
                      <td class="text-center">2</td>
                      <td>shipin2</td>
                      <td>
                        <a href="#">点击查看</a>
                      </td>
                      <td>视频简介balabala...</td>
                      <td>$2</td>
                      {{--                    <td>AA Club</td>--}}
                      <td>2000/1/1 12:00:00</td>
                      <td><span class="badge badge-dark">{{ __('Deleted') }}</span></td>
                      <td class="td-actions text-right">
                        <a rel="tooltip" class="btn btn-success btn-link" href="{{-- route('video.edit') --}}"
                           data-original-title="" title="">
                          <i class="material-icons">restore_from_trash</i>
                          <div class="ripple-container"></div>
                        </a>
                        <a rel="tooltip" class="btn btn-success btn-link" href="{{-- route('video.edit') --}}"
                           data-original-title="" title="">
                          <i class="material-icons">edit</i>
                          <div class="ripple-container"></div>
                        </a>
                      </td>
                    </tr>
                  @else
                    @foreach($videos as $video)
                      <tr id="video-{{ $video->id }}">
                        <td class="text-center">
                          {{ $loop->iteration }}
                        </td>
                        <td>
                          {{ $video->title }}
                        </td>
                        <td class="text-center">
                          <a href="#" data-toggle="modal" data-target="#videoPlayerModel-{{ $loop->index }}">
                            ({{ count($video->videos) }})
                          </a>
                          <div class="modal fade model-video-player" id="videoPlayerModel-{{ $loop->index }}"
                               tabindex="-1" role="dialog"
                               aria-labelledby="VideoPlayerModel"
                               aria-hidden="true">
                            <div class="modal-dialog modal-dialog-centered modal-lg">
                              <div class="modal-content">
                                <div class="modal-header">
                                  <h5 class="modal-title">视频播放</h5>
                                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                  </button>
                                </div>
                                <div class="modal-body">
                                  <div id="videoModelCarouselIndicators" class="carousel slide" data-ride="carousel"
                                       data-interval="false">
                                    <ol class="carousel-indicators">
                                      <li data-target="#videoModelCarouselIndicators" data-slide-to="0"
                                          class="active"></li>
                                      <li data-target="#videoModelCarouselIndicators" data-slide-to="1"></li>
                                    </ol>
                                    <div class="carousel-inner">
                                      @foreach($video->videos as $v)
                                        @if ($loop->first)
                                          <div class="carousel-item active">
                                            <video src="{{ $v->path }}" width="600" controls></video>
                                          </div>
                                        @else
                                          <div class="carousel-item">
                                            <video src="{{ $v->path }}" preload="none" width="600" controls></video>
                                          </div>
                                        @endif
                                      @endforeach
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </td>
                        <td class="table-col-intro" style="max-width: 550px">
                          {{ $video->intro }}
                        </td>
                        <td class="table-col-price">
                          ￥{{ $video->price }}
                        </td>
                        <td class="table-col-created-at">
                          {{ $video->created_at->toDateTimeString() }}
                        </td>
                        <td class="table-col-published-at">
                          {{ is_null($video->published_at)?'-':$video->published_at->toDateTimeString() }}
                        </td>
                        <td class="text-center table-col-status">
                          {{-- $video->status --}}
                          @switch($video->status)
                            @case(0)
                            <span class="badge badge-secondary">未发布</span>@break
                            @case(1)
                            <span class="badge badge-success">发布</span>@break
                            @case(2)
                            <span class="badge badge-dark">下架</span>@break
                            @default
                            未知状态
                          @endswitch
                        </td>
                        <td class="td-actions text-right">
                          @if($video->status == 0)
                            <a rel="tooltip" class="btn btn-success btn-link btn-video-edit"
                               href="/video/{{ $video->id }}/edit">
                              编辑
                              <div class="ripple-container"></div>
                            </a>
                          @endif
                          <a rel="tooltip" class="btn btn-success btn-link btn-video-change-status" href="javascript:"
                             data-video-status={{ $video->status }} data-video-id={{ $video->id }}>
                            {{ ($video->status !== 1)?'发布':'下架' }}
                            <div class="ripple-container"></div>
                          </a>
                        </td>
                      </tr>
                    @endforeach
                  @endif
                  </tbody>
                </table>
              </div>
            </div>
            <div class="card-footer justify-content-end">
              <div class="col-auto">
                {{ $videos->links() }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
@endsection

@push('js')
  <script>
    $('.btn-video-change-status').on('click', function () {
      let id = $(this).attr('data-video-id');
      let status = $(this).attr('data-video-status');
      axios.patch(`/video/${id}/status`, {
        status: (status !== '1') ? 1 : 2
      }).then(res => {
        if (res.status === 200)
          location.reload();
        else
          reject(new Error(`[${res.status}]${res.statusText}: ${res.data}`));
      });
      // .then(data => {
      //   console.log(data);
      //   let s = null;
      //   switch (data.status) {
      //     case 0:
      //       s = '<span class="badge badge-secondary">未发布</span>';
      //       break;
      //     case 1:
      //       s = '<span class="badge badge-success">发布</span>';
      //       break;
      //     case 2:
      //       s = '<span class="badge badge-dark">下架</span>';
      //       break;
      //     default:
      //       console.log('Unknown status result: ' + s);
      //   }
      //   $(`#video-${id} .table-col-status`).html(s);
      //   $(`#video-${id} .btn-video-change-status`).text((data.status !== 1) ? '发布' : '下架');
      //   $(`#video-${id} .btn-video-edit`).hide();
      //   $(`#video-${id} .table-col-published-at`).text(data.published_at);
      //   $(this).attr('data-video-status', data.status);
      // }).catch(e => console.log(e));
    });

    // 关闭模态框自动暂停播放
    $('.model-video-player').on('hide.bs.modal', function () {
      $(this).find('video').trigger('pause');
    });
  </script>
@endpush
